<script setup lang="ts">
import { TSqlInfo } from '@/models/reactiveComponent';
import { Container } from '@/models/containers';
import { computed, ref, watch, inject } from 'vue'
import { createSqlQueryMappingRunner } from '@/core/jsCodeRunner';
import * as injectKeys from "@/services/injectKeys";


const utilsServices = inject(injectKeys.utilsKey)!

interface TModel extends Container {
    sqlInfo: TSqlInfo
}

const props = defineProps<{ model: TModel }>()
const model = props.model



const cardDatas = computed(() => {
    const sqlInfo = model.sqlInfo
    const sqlQuery = utilsServices.createSqlQuery(model.id, sqlInfo.sql)
    const mapRunner = createSqlQueryMappingRunner(sqlInfo.jsMap, sqlInfo.type)

    const data = sqlQuery.query()

    if (data.rows.length === 0) {
        return null
    }

    const res = mapRunner.map(data) as {}[]

    return res
})


</script>

<template>
    <div class="ex-cards-zone-box" :data-tag="model.tag">


    </div>
</template>

<style scoped lang="less">
.ex-cards-zone-box {}
</style>